<template>
  <div class="workbenchesContainer">
    <div class="workbenchesWrapper">
      <StarBackground />
      <div class="workbenchesContent">
        <div class="left">
          <a-breadcrumb style="margin: 30px 0 10px 0;line-height: 1;padding: 0;">
            <a-breadcrumb-item>
              <router-link :to='{name: "stu"}'>{{ t('menu','首页') }}</router-link>
            </a-breadcrumb-item>
            <a-breadcrumb-item>
              {{ projectName }}
            </a-breadcrumb-item>
          </a-breadcrumb>
					<div class="ai">
						<minAi ref="minAiRef" v-model:currentEvent="currentEvent"  @handleThought="handleThought" :record="currentData"
            :btns="menuActive == '3' ? 'stop,copy' : 'stop,copy,file'" :url="`/ai/dify/learning/${currentQuery.agentId}/chatMessages`" :inputs="{userId: `student_${state.userInfo.id}`, projectId: currentQuery.id}"/>
						<!-- <minAi url="/ai/dify/system/chat/chatMessages" /> -->
					</div>
        </div>
        <div class="content">
			    <div>
            <minMenu v-model="menuActive" :structure="menuStructure" jump="none" inline />
          </div>
          <div class="list">
            <div class="item" v-for="(item, index) in taskList">
              <div class="titleBox" @click="handleClick({name: '查看', item})">
                <span class="title">{{ item.title }}</span>
                <span class="score">{{ item.score }}</span>
              </div>
              <div class="info">
                {{item.createdTime}}
                <div class="btns" v-if="item.status != 3">
                  <a-button type="primary" @click="handleClick({name: '去提交', item})">{{ t('learnProcess','去提交') }}</a-button>
                  <a-button v-if="item.score" @click="handleClick({name: '确认评分', item})">{{ t('learnProcess','确认评分') }}</a-button>
                </div>
                <a-button v-else type="primary" @click="handleClick({name: '讲解', item})">{{ t('learnProcess','讲解') }}</a-button>
              </div>
            </div>
				    <div class="noData" v-if="!taskList.length">{{ t('common','暂无数据') }}</div>
          </div>
          <div class="mask" :style="{ cursor: 'not-allowed' }" v-if="currentEvent && currentEvent !== 'message_end'"></div>
          <div style="min-height: 60px;display: flex;align-items: center;justify-content: center;">
            <a-pagination style="text-align: center" @change="show" v-model:current="pagination.current" show-size-changer :page-size-options="['10', '20', '50']"
            :total="pagination.totalElements" :pageSize="pagination.size" @showSizeChange="(current, size) => {pagination.size = size}" />
          </div>
        </div>
      </div>
    </div>
    
    <a-drawer
			title=""
			width="900px"
			placement="right"
			:closable="false"
			v-model:open="drawer.visible"
		>
			<taskDetail v-model:currentData="taskDetailData" :hasDel="menuActive !== '3'"/>
		</a-drawer>
  </div>
</template>

<script setup>
import StarBackground from '@/components/StarBackground.vue'
import minHeader from '@/components/common/minHeader.vue'
import { useRoute, useRouter } from 'vue-router'
import { reactive, ref, watch, h } from 'vue'
import * as antIcons from '@ant-design/icons-vue'
import teacher from '@/router/teacher'
import minMenu from '@/components/common/minMenu.vue'
import { state, isTeacher } from '@/stores/info.js'
import minAi from '@/components/common/minAi.vue'
import { studentLearningTaskPage } from '@/request/stu/learnProcess'
import { studentLearningTaskFindById, learningTaskScoring } from '@/request/stu/task'
import taskDetail from '@/components/stu/taskDetail.vue'
import { message, Modal } from 'ant-design-vue'
import { t } from '@/i18n'

const route = useRoute()
const router = useRouter()
const projectName = ref(route.query.name ||'')

const drawer = reactive({ visible: false, data: {} })
const taskDetailData = ref({})

const minAiRef = ref(null)
const currentEvent = ref('')
const menuActive = ref('1:2')
const menuStructure = [
  {
    value: '1:2',
    label: '未完成',
  },
  {
    value: '3',
    label: '已完成',
  },
]



const currentQuery = ref({})
const currentData = ref({})
currentQuery.value = route.query

const taskList = ref([])
const pagination = ref({ totalElements: 0, current: 1, size: 10 })

const show = async () => {
	let req = {
		...pagination.value,
		page: pagination.value.current - 1,
    search_AND_IN_status: menuActive.value,
    search_AND_EQ_learningId: currentQuery.value.id
	}
	let res = await studentLearningTaskPage(req)
	if (!res) return
	taskList.value = [...res.data.content]
	pagination.value = {
		...pagination.value,
		...res.data.page
	}
}
show()
const handleThought = async val => {
	// if(val.thought.includes('分')) {
	// if(val.tool.includes('saveRating') && val.observation) {
	// 	message.success('评分已成功保存')
		pagination.value.current = 1
		show()
	// }
}
watch(() => menuActive.value, () => {
  pagination.value.current = 1
  currentData.value = {}
  show()
})
watch(() => currentEvent.value, (newVal) => {
  if (newVal === 'message_end') currentEvent.value = ''
})

const handleClick = async ({ name, item, index }) => {
  let operate = null
  let res = null
  switch (name) {
    case '去提交':
      currentData.value = item
      currentEvent.value = 'start'
      setTimeout(() => {
        minAiRef.value.handleSend(`${t('learnProcess','我要提交任务')}`, { taskId: item.id })
      }, 100)
      break
    case '确认评分':
      operate = await new Promise((resolve, reject) => {
				Modal.confirm({
					content: t('learnProcess','是否确认评分'),
					onOk() {
						resolve(true);
					},
					confirmText: t('common','确定'),
					cancelText: t('common','取消'),
					onCancel() {
						resolve(false);
					},
				})
			})
			if (!operate) return
      res = await learningTaskScoring(item.id)
			if (!res) return
      currentData.value['id'] = ''
			message.success(t('common','操作成功'))
			show()
      break
    case '讲解':
      currentData.value = item
      currentEvent.value = 'start'
      setTimeout(() => {
        minAiRef.value.handleSend(`${t('learnProcess','解释一下评分的理由')}`, { taskId: item.id })
      }, 100)
			break
    case '查看':
    res = await studentLearningTaskFindById(item.id)
			if (!res) return
			taskDetailData.value = res.data
			drawer.visible = true
      break
  }
}
</script>

<style lang="scss" scoped>
* {
  box-sizing: border-box;
  /* min-height: 0; */
  min-width: 0;
}
.workbenchesContainer {
  height: 100%;
  width: 100%;
  min-height: 0;

  display: flex;
  flex-direction: column;
  min-width: 0;
  .workbenchesHeader {
    width: 100%;
    display: flex;
    justify-content: center;
    background: #fff;
    .header {
      width: $viewMinWidth;
    }
  }
  .workbenchesWrapper {
    min-height: 0;
    min-width: 0;
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    .workbenchesContent {
      min-height: 0;
      flex: 1;
      width: $viewMinWidth;
      display: flex;
      justify-content: space-between;
      .left {
        display: flex;
        flex-direction: column;
				padding: 0px 0 30px 0 ;
				width: 1000px;
        .ai {
					flex-grow: 1;
					flex-shrink: 1;
					min-height: 0;
					width: 100%;
					/* padding-top: 30px; */
				}
      }
      .content {
        min-height: 0;
        background: #fff;
        border-radius: 10px;
        margin: 30px 0 30px 20px;
        padding: 0px 20px;
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        flex-shrink: 0;
        position: relative;
        .mask {
          height: 100%;
          background: transparent;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          z-index: 10;
        }
        .list {
          min-height: 0;
          flex-grow: 1;
          display: flex;
          flex-direction: column;
          padding: 10px 0;
          gap: 10px;
          overflow: auto;
        position: relative;

          .item {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            background: #f5f5f5;
            border-radius: 10px;
            padding: 20px;
            .titleBox {
              display: flex;
              align-items: center;
              justify-content: space-between;
              .title {
                cursor: pointer;
              }
              .score {
                color: #A599C5;
              }
            }
            .info {
              margin-top: 10px;
              display: flex;
              align-items: center;
              justify-content: space-between;
              font-size: 14px;
              .btns {
                gap: 10px;
                display: flex;
              }
            }
          }
        }
      }
    }
  }
  .noData {
	padding: 60px;
	width: 100%;
	text-align: center;
	color: #A3A6AD;
	font-size: 34rpx;
}
}
</style>
